<template>
  <view class="container bg-back flex-1 flex flex-col px-[3%] pt-[2%]">
    <view class="bg-white rounded-[20rpx] py-[5%] mt-[4%]">
      <view class="flex flex-col justify-center flex-1 items-center">
        <view
          class="font-bold mt-[11%] mb-[7%]"
          :class="isBigSreen ? 'text-2main' : ''"
          >拍摄正脸照片 · 一键制作</view
        >
        <view
          class="flex justify-center relative"
          :class="
            isBigSreen ? 'w-[384rpx] h-[384rpx]' : 'w-[192rpx] h-[192rpx]'
          "
        >
          <image
            class="w-full h-full bor"
            mode="aspectFill"
            :src="errData.ai_image"
          ></image>
          <image
            :class="
              isBigSreen
                ? 'w-[93rpx] h-[93rpx] right-0 -bottom-[0rpx]'
                : 'w-[48rpx] h-[48rpx] right-0 -bottom-[2rpx]'
            "
            class="absolute"
            src="@/static/error.png"
          >
          </image>
        </view>
        <view
          class="text-main mt-[7%]"
          :class="isBigSreen ? 'text-2base' : 'text-base'"
          >{{ errData.title }}</view
        >
        <view
          class="flex items-center flex-1 w-full justify-center mb-[4%] mt-[8%]"
        >
          <view :class="isBigSreen ? 'big-line' : 'line'"></view>
          <view
            class="text-muted px-[5%]"
            :class="isBigSreen ? 'text-2xs' : 'text-xs'"
            >请根据提示拍照 避免以下情况</view
          >
          <view :class="isBigSreen ? 'big-line ' : 'line'"></view>
        </view>
        <view class="flex justify-between w-full px-[7%]">
          <view class="w-1/4 mr-[2.4%]">
            <view class="relative">
              <image
                class="w-full"
                mode="widthFix"
                src="@/static/1.png"
              ></image>
              <image
                src="@/static/error.png"
                mode="widthFix"
                class="aspect-square absolute right-0 bottom-0"
                :class="isBigSreen ? 'w-[25%]' : 'w-[48rpx]'"
              ></image>
            </view>
            <view
              class="text-main text-center pt-[5%]"
              :class="isBigSreen ? 'text-2base' : 'text-base'"
              >五官模糊</view
            >
          </view>
          <view class="w-1/4 mx-[2.4%]">
            <view class="relative">
              <image
                class="w-full"
                mode="widthFix"
                src="@/static/2.png"
              ></image>
              <image
                src="@/static/error.png"
                mode="widthFix"
                class="aspect-square absolute right-0 bottom-0"
                :class="isBigSreen ? 'w-[25%]' : 'w-[48rpx]'"
              ></image>
            </view>
            <view
              class="text-main text-center pt-[5%]"
              :class="isBigSreen ? 'text-2base' : ' text-base'"
              >侧脸</view
            >
          </view>
          <view class="w-1/4 mx-[2.4%]">
            <view class="relative">
              <image
                class="w-full"
                mode="widthFix"
                src="@/static/3.png"
              ></image>
              <image
                src="@/static/error.png"
                mode="widthFix"
                class="aspect-square absolute right-0 bottom-0"
                :class="isBigSreen ? 'w-[25%]' : 'w-[48rpx]'"
              ></image>
            </view>
            <view
              class="text-main text-center pt-[5%]"
              :class="isBigSreen ? 'text-2base' : ' text-base'"
              >戴帽子</view
            >
          </view>
          <view class="w-1/4 ml-[2.4%]">
            <view class="relative">
              <image
                class="w-full"
                mode="widthFix"
                src="@/static/4.png"
              ></image>
              <image
                src="@/static/error.png"
                mode="widthFix"
                class="aspect-square absolute right-0 bottom-0"
                :class="isBigSreen ? 'w-[25%]' : 'w-[48rpx]'"
              ></image>
            </view>
            <view
              class="text-main text-center pt-[5%]"
              :class="isBigSreen ? 'text-2base' : ' text-base'"
              >手势遮挡</view
            >
          </view>
        </view>
      </view>
    </view>
    <view class="flex justify-center mt-[16%] pb-[10%]" v-if="!isBigSreen">
      <view
        @click="submit"
        class="flex items-center justify-center up-btn"
        :class="isBigSreen ? 'big-btn' : ''"
      >
        <view class="font-bold text-white">重新拍摄</view>
      </view>
    </view>
    <view class="slide" v-if="isBigSreen">
      <view v-if="open" class="content">
        <view class="circle light mb-30" @click="submit()">
          <view class="slc">重新 </view>
          <view class="slc">拍摄</view>
        </view>

        <view class="circle dark" @click="goHome"> 首页 </view>
      </view>
      <view class="jiantou">
        <view :class="open ? 'a mt-6' : 'b'" @click="handleSilde">
          <up-icon name="arrow-left-double" color="#8a8f96" size="36"></up-icon>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { getQrCode, uploadFile, getUploadAuth, createPic } from "@/api/ai.js";
import { onLoad, onShow, onUnload } from "@dcloudio/uni-app";
import { ref, reactive, computed } from "vue";

const errData = ref(uni.getStorageSync("errData") || {});

const show = ref(false);
const state = reactive({
  auth_code: "",
  id: "",
  scence_id: "",
});
const fileList = ref([]);

// 新增图片
const afterRead = async (event) => {
  // 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
  let lists = [].concat(event.file);
  let fileListLen = fileList.value.length;
  lists.map((item) => {
    fileList.value.push({
      ...item,
      status: "uploading",
      message: "上传中",
    });
  });
  const auth_code = await getUploadAuth();
  console.log(lists, auth_code);
  const result = await uploadFile({
    filePath: fileList.value[0].url,
    name: "file",
    formData: {
      auth_code: auth_code.auth_code,
      // qr_code: 456,
    },
  });
  console.log(result);

  let item = fileList.value[fileListLen];
  fileList.value.splice(fileListLen, 1, {
    ...item,
    status: "success",
    message: "",
    orgurl: result.data.fullurl,
    url: result.data.face_url,
  });
};

const deletePic = (event) => {
  fileList.value.splice(event.index, 1);
};

const isBigSreen = computed(() => {
  return uni.getSystemInfoSync().windowWidth > 500;
});

const goback = () => {
  uni.navigateBack();
};
const submit = () => {
  uni.removeStorageSync("errData");
  uni.redirectTo({
    url: `/pages/ai/upload?id=${state.id}&scence_id=${state.scence_id}`,
  });
};

onUnload(() => {
  uni.removeStorageSync("errData");
});

const getUrlImg = () => {
  getQrCode().then((res) => {});
};
onLoad(({ id, scence_id }) => {
  state.id = id;
  state.scence_id = scence_id;
});

const open = ref(true);
const handleSilde = () => {
  open.value = !open.value;
};

const goHome = () => {
  uni.reLaunch({
    url: "/pages/ai/home",
  });
};
</script>

<style lang="scss" scoped>
.line {
  width: 80rpx;
  height: 0rpx;
  border: 2rpx solid #eaeaea;
}
.big-line {
  width: 160rpx;
  height: 0rpx;
  border: 4rpx solid #eaeaea;
}
.re-btn {
  width: 32%;
  aspect-ratio: 60/21;
  border-radius: 50rpx 50rpx 50rpx 50rpx;
  border: 2rpx solid #2568ec;
  color: #1250b5;
  margin-right: 4.5%;
}
.up-btn {
  width: 45%;
  height: 84rpx;
  // aspect-ratio: 60/21;
  background: #2568ec;
  border-radius: 50rpx 50rpx 50rpx 50rpx;
  margin-left: 4.5%;
}
.big-btn {
  width: 680rpx !important;
  height: 168rpx !important;
  font-size: 64rpx;
  border-radius: 100rpx 100rpx 100rpx 100rpx !important;
}

.bor {
  border-radius: 50%;
  border: 4rpx solid #ed2638;
}
::v-deep .u-upload__success {
  display: none;
}
::v-deep .u-upload__deletable {
  right: 8rpx;
}
.slide {
  position: fixed;
  z-index: 555;

  right: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  padding: 48rpx 20rpx;
  bottom: 20%;
  width: 248rpx;
  background: linear-gradient(
    180deg,
    rgba(53, 58, 64, 0.9) 0%,
    rgba(22, 23, 27, 0.9) 100%
  );
  border-radius: 64rpx 0rpx 0rpx 120rpx;
  border: 1rpx solid;
  // border-image: linear-gradient(
  //     180deg,
  //     rgba(66.00000366568565, 71.00000336766243, 80.00000283122063, 1),
  //     rgba(32.00000189244747, 35.00000171363354, 38.0000015348196, 1)
  //   )
  //   4 4;
  .circle {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 188rpx;
    height: 188rpx;
    font-size: 48rpx;
    font-weight: 600;
    text-align: center;
    color: #c3c8cd;
    .slc {
      line-height: 1.2;
    }
    &.light {
      font-weight: 600;
      color: #ffffff;
      text-shadow: 0px 0px 50px rgba(38, 171, 247, 0.2),
        0px 0px 20px rgba(99, 207, 255, 0.5);
      background: linear-gradient(321deg, #0077ce 0%, #4ec0ff 100%);
      border-radius: 200rpx 200rpx 200rpx 200rpx;
      filter: blur(0.3px);
    }
    &.dark {
      background: linear-gradient(318deg, #1d2328 0%, #131314 100%);
      border-radius: 100rpx 100rpx 100rpx 100rpx;
      filter: blur(0.3px);

      box-shadow: inset 0rpx 0rpx 3rpx 0rpx rgba(63, 63, 63, 0.45);
    }
    &.mb-30 {
      margin-bottom: 30rpx;
    }
  }
  .jiantou {
    .a {
      transform: rotate(90deg);
    }
    .b {
      transform: rotate(-90deg);
    }
  }
}
</style>
